<template>
  <view class="login-content">
    <view
      class="nav-bar-box"
      :style="{
        height: heightConfig.navBarHeight + 'px',
        paddingTop: heightConfig.navBarPaddingTop + 'px',
      }"
    >登录</view>
    <view class="logo-box">
      <view class="logo">
        <image
          class="logo-img"
          :src="baseIconUrl + '/commonIcon/icon_about_logo_big.png'"
          mode="aspectFit"
        />
      </view>
      <view class="title">武汉市青少年脊柱健康技术中心</view>
    </view>
    <view class="btn-box">
      <button
        class="phone-btn cu-btn block bg-blue lg round"
        :style="{ opacity: isAgree ? 1 : .6 }"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        bindgetphonenumber="getPhoneNumber"
        :disabled="!isAgree"
      >手机号快捷登录</button>
      <view class="physician-btn" @click.stop="clickPhysicianLogin">康复师登录</view>
    </view>
    <view class="bottom-box">
      <uni-icons
        v-if="!isAgree"
        type="circle"
        :size="20"
        color="#999999"
        class="icon"
        @click="clickReadIcon"
      ></uni-icons>
      <uni-icons
        v-else
        type="checkbox-filled"
        :size="20"
        color="#115BAA"
        class="icon"
        @click="clickReadIcon"
      ></uni-icons>
      <view class="read-text" @click="clickReadIcon">
        阅读并同意博奥美迪<text class="red-text" @click.stop="clickViewService">《用户服务协议》</text>
          和<text class="red-text" @click.stop="clickPrivacy">《用户隐私协议》</text>
      </view>
    </view>
    <you-popup
      dialogWidth="90vw"
      :popupVisible="servicePopup"
      :popupTitle="popupTitle"
      :showBtn="false"
	    @popupClose="servicePopup = false"
    >
      <template #popupContent>
        <view class="dialog-content">
          <scroll-view scroll-y class="service-box">
            <view class="service-content">
              <rich-text class="user-content" :nodes="serviceContent"></rich-text>
            </view>
          </scroll-view>
          <view class="close-btn" @click="clickAlView">确定</view>
        </view>
      </template>
    </you-popup>
  </view>
</template>

<script>
  import api_login from '@/api/login'
  import api_user from '@/api/user'
  import { baseIconUrl } from '@/config'
  export default {
    name: 'Login',
    data() {
      return {
        baseIconUrl,
        heightConfig: {},
        isAgree: false,
        servicePopup: false,
        popupTitle: '',
        serviceContent: ''
      }
    },
    onLoad() {
      if (uni.getStorageSync('App-Token') && uni.getStorageSync('identify') === 'user') {
        uni.switchTab({
          url: '/pages/userIndex'
        })
      }
      if (uni.getStorageSync('App-Token') && uni.getStorageSync('identify') === 'physician') {
        uni.reLaunch({
          url: '/pages/physicianIndex'
        })
      }
      this.heightConfig = this.$store.getters.heightData
    },
    methods: {
      clickReadIcon() {
        this.isAgree = !this.isAgree
      },
      clickPhysicianLogin() {
        uni.navigateTo({
          url: '/subPages/home/physicianLogin'
        })
      },
      clickViewService() {
        const params = {
          id: 10
        }
        api_user.fetchNewsDetail(params).then(res => {
          if (res.code !== 200) return
          this.serviceContent = res.data.content && res.data.content.replace(/\n/g, '<br/>')
          this.popupTitle = '用户服务协议'
          this.servicePopup = true
        })
      },
      clickPrivacy() {
        const params = {
          id: 14
        }
        api_user.fetchNewsDetail(params).then(res => {
          if (res.code !== 200) return
          this.serviceContent = res.data.content && res.data.content.replace(/\n/g, '<br/>')
          this.popupTitle = '用户隐私协议'
          this.servicePopup = true
        })
      },
      clickAlView() {
        this.isAgree = true
        this.servicePopup = false
      },
      getPhoneNumber(e) {
        if (e.mp.detail.errMsg === 'getPhoneNumber:ok') {
          uni.login({
            provider: 'weixin',
            success: function (loginRes) {
              if (loginRes.code) {
                const params = {
                  code: loginRes.code,
                  phoneCode: e.detail.code
                }
                api_login.loginOpenid(params).then(res => {
                  if(res.code === 200) {
                    uni.setStorageSync('App-Token', res.token)
                    uni.setStorageSync('identify', 'user')
                    api_login.fetchUserInfo().then(res => {
                      if (res.code !== 200) return
                      const userInfo = {
                        baUserId: res.baUser.id,
                        ...res.baUser
                      }
                      uni.setStorageSync('allUserInfo', userInfo)
                    })
                    uni.switchTab({
                      url: '/pages/userIndex'
                    })
                  }
                })
              } else {
                console.log('登录失败！' + loginRes.errMsg)
              }
            }
          })
        } else {
          // 用户拒绝授权
          console.log('用户拒绝授权')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .login-content {
    height: 100vh;
    background-color: #FFF;    
  }

  .nav-bar-box {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    font-size: 36rpx;
    font-weight: 500;
  }

  .logo-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 90rpx 0 140rpx;
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200rpx;
      height: 200rpx;
      border-radius: 100rpx;
      box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, 0.2);
      overflow: hidden;
      .logo-img {
        height: 180rpx;
      }
    }
    .title {
      margin-top: 30rpx;
      font-size: 32rpx;
    }
  }
  .btn-box {
    padding: 0 30rpx;
    .phone-btn,
    .physician-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 94rpx;
      border-radius: 48rpx;
      font-size: 32rpx;
      border: 2rpx solid #115BAA;
    }
    .phone-btn {
      margin-bottom: 30rpx;
      color: #FFF;
      background-color: #115BAA;
    }
    .physician-btn {
      border: 2rpx solid #d1d6df;
      color: #333;
      background-color: #FFF;
    }
  }
  .bottom-box {
    display: flex;
    padding: 20rpx 30rpx 0;
    .icon {
      margin-right: 12rpx;
    }

    .read-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #444;

      .red-text {
        color: #2f6fb4;
      }
    }
  }
  .dialog-content {
    padding-bottom: 36rpx;
    .service-box {
      max-height: 55vh;
      .service-content {
        padding: 30rpx 40rpx;
        .text {
          width: 100%;
        }
      }
    }
    .close-btn {
      width: 80%;
      height: 70rpx;
      margin: 40rpx auto 0;
      border-radius: 35rpx;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 70rpx;
      color: #FFFFFF;
      background: #115BAA;
    }
  }
</style>
